// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: item1
    width: 400
    height: 600

    Text {
        id: title
        color: "#ffffff"
        text: "页面风格设置"
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.leftMargin: 10
        font.pixelSize: 55
    }

    Item {
        id: style_options_panel
        width: 300
        height: 441
        anchors.top: title.bottom
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.leftMargin: 10
        clip: true
        state: "hide"

        property bool isShow: false

        states: [
            State {
                name: "hide"
                PropertyChanges {
                    target: style_options_panel
                    height: style_option_show.height
                }

                PropertyChanges {
                    target: style_options_column
                    opacity: 0
                }
            }
        ]

        Behavior on height {
            PropertyAnimation { duration: 100; easing.type: Easing.OutQuad }
        }

        Mbutton {
            id: style_option_show
            pro_width: 250
            pro_height: 70
            textstring: "色调风格"
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0

            onButtonclick:
            {
                if (!style_options_panel.isShow)
                {
                    style_options_panel.state = "";
                    style_options_panel.isShow = true;
                }
                else
                {
                    style_options_panel.state = "hide";
                    style_options_panel.isShow = false;
                }
            }
        }

        Column {
            id: style_options_column
            x: 0
            y: 0
            width: 238
            height: 195
            anchors.rightMargin: 0
            anchors.leftMargin: 20
            anchors.topMargin: 80
            spacing: 20
            anchors.bottomMargin: 0
            anchors.fill: parent

            Behavior on opacity {
                PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
            }

            CheckBox {
                id: checkbox_blue
                x: 0
                y: 54
                textstring: "深蓝"
                isCheck: true

                onCheck_statue:
                {
                    data_container.setting_style = "darkblue";
                    checkbox_blue.isCheck = true;
                    checkbox_green.isCheck = false;
                    checkbox_yellow.isCheck = false;
                    checkbox_red.isCheck = false;
                    checkbox_black.isCheck = false;
                }
            }

            CheckBox {
                id: checkbox_green
                x: 0
                y: 150
                textstring: "深绿"
                isCheck: false

                onCheck_statue:
                {
                    data_container.setting_style = "darkgreen";
                    checkbox_blue.isCheck = false;
                    checkbox_green.isCheck = true;
                    checkbox_yellow.isCheck = false;
                    checkbox_red.isCheck = false;
                    checkbox_black.isCheck = false;
                }
            }

            CheckBox {
                id: checkbox_yellow
                x: 0
                y: 100
                textstring: "深黄"
                isCheck: false

                onCheck_statue:
                {
                    data_container.setting_style = "darkyellow";
                    checkbox_blue.isCheck = false;
                    checkbox_green.isCheck = false;
                    checkbox_yellow.isCheck = true;
                    checkbox_red.isCheck = false;
                    checkbox_black.isCheck = false;
                }
            }

            CheckBox {
                id: checkbox_red
                x: 0
                y: 209
                textstring: "深红"
                isCheck: false

                onCheck_statue:
                {
                    data_container.setting_style = "darkred";
                    checkbox_blue.isCheck = false;
                    checkbox_green.isCheck = false;
                    checkbox_yellow.isCheck = false;
                    checkbox_red.isCheck = true;
                    checkbox_black.isCheck = false;
                }
            }

            CheckBox {
                id: checkbox_black
                x: 0
                y: 289
                textstring: "纯黑"
                isCheck: false

                onCheck_statue:
                {
                    data_container.setting_style = "black";
                    checkbox_blue.isCheck = false;
                    checkbox_green.isCheck = false;
                    checkbox_yellow.isCheck = false;
                    checkbox_red.isCheck = false;
                    checkbox_black.isCheck = true;
                }
            }
        }

    }

    Column {
        id: setting_column
        width: 200
        visible: false
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        spacing: 30
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: style_options_panel.bottom
        anchors.topMargin: 10

        CheckBox {
            id: checkbox5
            x: 0
            y: 317
        }

        CheckBox {
            id: checkbox4
            x: 0
            y: 0
        }

        CheckBox {
            id: checkbox33
            x: 0
            y: 252
            width: 200
            height: 50
        }

        CheckBox {
            id: checkbox23
            x: 0
            y: 166
            width: 200
            height: 50
        }

        CheckBox {
            id: checkbox13
        x: 0
        y: 0
        width: 200
        height: 50
    }




    }

}
